<!--
 * @Author: Qimu
 * @Date: 2020-04-25 06:40:21
 * @LastEditors: Qimu
 * @LastEditTime: 2020-09-09 11:18:02
 * @Description: file content
 * @FilePath: \vue-admin-koa2\vue-admin\src\views\Home\Index.vue
 -->
<template>
  <div class="index">
    <el-container>
      <!-- 侧边栏 -->
      <Sidebar :isCollapse="isCollapse" />
      <el-container :class="isCollapse ? 'el-ml64' : 'el-ml200'">
        <!-- 头部导航区 -->
        <el-header>
          <div class="header-left">
            <i class="toggle icon el-icon-s-fold" @click="toggleCollapse"></i>
            <!-- 面包屑组件 -->
            <Breadcrumb />
          </div>
          <div class="header-right">
            <el-badge :value="3" class="item">
              <i class="badge icon el-icon-message-solid" @click="viewMessage"></i>
            </el-badge>
            <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
              <div class="avatar-wrapper">
                <el-avatar
                  class="admin-avatar"
                  shape="circle"
                  size="small"
                  :fit="fit"
                  :src="$store.getters.userInfo.admin_avatar"
                ></el-avatar>
                <i class="el-icon-caret-bottom" />
              </div>
              <el-dropdown-menu slot="dropdown">
                <router-link to="/index">
                  <el-dropdown-item>个人中心</el-dropdown-item>
                </router-link>
                <router-link to="/index">
                  <el-dropdown-item>首页</el-dropdown-item>
                </router-link>
                <el-dropdown-item divided @click.native="logout">
                  <span style="display:block;">退出</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 右侧内容主体 -->
        <el-main>
          <router-view>WELCOME</router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'layout',
  components: {
    Sidebar: () => import('@/components/Layout/Sidebar.vue'),
    Breadcrumb: () => import('@/components/Layout/Breadcrumb.vue')
  },
  data() {
    return {
      isCollapse: false, //是否水平折叠收起菜单
      fit: 'fill'
    };
  },
  created() { },
  computed: {},
  methods: {
    //查看消息
    viewMessage() {
      // console.log('viewMessage')
    },
    //登出方法
    logout() {
      window.localStorage.clear();
      window.sessionStorage.clear();
      window.location.reload();
      this.$router.push('/login');
      // this.$store.dispatch('setGargetUser', '')
    },
    //切换导航
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

<style lang="sass" scoped>
.index
  height: 100%
  .el-container
    @extend .index

.el-header
  background-color: #22242a
  color: #fff
  display: flex
  justify-content: space-between
  .toggle.icon
    font-size: 20px
    padding: 20px
    &:hover
      background-color: #000
      cursor: pointer
  .header-right
    display: flex
    justify-content: space-between
    .badge.icon
      font-size: 25px
      line-height: 60px
      margin-right: 30px
    .admin-avatar
      margin-top: 10px

.el-ml200
  transition: margin-left 0.28s
  margin-left: 200px

.el-ml64
  transition: margin-left 0.28s
  margin-left: 64px

.el-main
  background-color: #eaeaea
  color: #fff

.el-footer
  height: 30px !important
</style>